import { Button, Card, Form, Icon, Input } from "antd";
import { FormComponentProps } from "antd/es/form";
import FormItem from "antd/es/form/FormItem";
import * as React from "react";
import Header from "../layout/Header";
import CopyRight from "./CopyRight";
import "./register.css";

class Register extends React.Component<FormComponentProps> {
  public isReg() {
    return;
  }

  public register() {
    return;
  }

  public getCode() {
    return;
  }

  public render() {
    const { getFieldDecorator } = this.props.form;
    const phoneConfig = {
      rules: [
        {
          required: true,
          len: 11,
          pattern: new RegExp(/^1[3|4|5|7|8][0-9]{9}$/),
          message: "用户名错误"
        }
      ]
    };
    const passConfig = {
      rules: [
        {
          type: "string",
          required: true,
          min: 8,
          max: 16,
          pattern: new RegExp(
            "(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,16}"
          ),
          message: "密码错误"
        }
      ]
    };
    const codeConfig = {
      rules: [
        {
          type: "string",
          required: true,
          len: 6,
          message: "验证码错误"
        }
      ]
    };
    return (
      <div>
        <Header />
        <div className="registerContainer">
          <div className="formContent">
            <Card
              title={(() => {
                return (
                  <div
                    style={{ width: "100%", textAlign: "center", fontSize: 12 }}
                  >
                    <h2 className="loginTitle" style={{ fontWeight: "bolder" }}>
                      {"找回密码"}
                    </h2>
                  </div>
                );
              })()}
              bordered={true}
              style={{ width: "30%", minWidth: "400px" }}
            >
              <Form>
                <FormItem>
                  {getFieldDecorator("userName", phoneConfig)(
                    <Input
                      prefix={<Icon type="mobile" />}
                      placeholder={"手机号"}
                    />
                  )}
                </FormItem>
                <FormItem extra="密码中必须包含字母、数字、特殊字符，至少8个字符，最多16个字符">
                  {getFieldDecorator("password", passConfig)(
                    <Input
                      prefix={<Icon type="lock" />}
                      type="password"
                      placeholder={"密码"}
                    />
                  )}
                </FormItem>
                <FormItem>
                  {getFieldDecorator("code", codeConfig)(
                    <Input
                      prefix={<Icon type="eye-o" />}
                      style={{ width: "60%" }}
                      placeholder={"验证码"}
                    />
                  )}
                  <Button
                    type="primary"
                    style={{
                      width: "30%",
                      marginLeft: "7%"
                    }}
                  >
                    we
                  </Button>
                </FormItem>
                <FormItem>
                  <Button
                    type="primary"
                    style={{
                      width: "100%",
                      height: "40px"
                    }}
                  >
                    {"找回"}
                  </Button>
                </FormItem>
              </Form>
            </Card>
          </div>
          <CopyRight />
        </div>
      </div>
    );
  }
}

export default Form.create()(Register);
